<template>
  <div>
    <div style="width: 77%;background-color: #FFF;margin: 0 auto;padding: 20px;border-radius: 15px;margin-bottom:20px" >
      <span style="margin-left: 10%">offer : </span>
      <el-select id="id-business-share-offerId" clearable filterable v-model="offerId" size="mini">
        <el-option v-for="(item,index) in offerList"  :label="item.name" :key="index" :value="item.id">
          <el-tooltip :disabled="item.name.length <= 8" class="item" effect="dark" :content="item.name" placement="right">
            <span style="margin-left: 10px;color: #606266;font-size: 13px">{{labelLength(item.name)}}</span>
          </el-tooltip>
        </el-option>
      </el-select>
    </div>
    <offer-share :offer-id="offerId" :offer-info="getOfferInfo(offerId)" :open-check="openCheck" ></offer-share>
  </div>
</template>
<script>

import { getOfferList } from "@/api/business/share"
import offerShare from "./components/offerShare";

export default {
  name: 'share',
  components: {
    offerShare
  },
  data() {
    return {
      offerList:[],
      offerId:'',
      offerInfo: null,
      openCheck : ''
    }
  },
  mounted() {
    if(this.$route.query.offerId){
      this.offerId = this.$route.query.offerId;
      this.openCheck = false;
    }
    getOfferList().then(res =>{
      this.offerList = res.data.data
    })
  },
  methods: {
    getOfferInfo(offerId) {
      let self = this;
      if(self.offerList != null) {
        for(let i=0;i<self.offerList.length;i++) {
          if(self.offerList[i].id == offerId) {
            return self.offerList[i];
          }
        }
      }
      return null;
    },
    //显示label长度
    labelLength(val){
      if(val.length > 8 ){
        return val.substr(0,8) + '...'
      }else{
        return val
      }
    }
  }
}
</script>
<style lang="scss">

</style>
